pre::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

pre::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #cacaca
}

pre::-webkit-scrollbar-track-piece {
    background-color: transparent;
}

pre[class*=language-] {
    padding: 8px;
    border-radius: 4px;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    margin: 8px 0;
    font-size: 12px;
    color: #c1c1c1;
    border-radius: 4px;
    overflow: auto;
    background-color: #222832;

    code[class*=language-] {
        counter-reset: line;
        white-space: pre !important;

        span {
            font-size: 12px;
        }
    }

    code[class*=language-].wrap {
        white-space: pre-wrap;

        .code-line {
            display: inline-block;
            position: relative;
            padding-left: 30px;
            line-height: 22px;
            word-wrap: break-word;

            &:before {
                left: 0;
                font-size: 12px;
                color: #919191;
                margin-right: 1em;
                position: absolute;
                content: counter(line);
                counter-increment: line;
            }

            &:last-child {
                margin-bottom: 0
            }

            .token.boolean {
                color: #d19a66;
            }

            .token.identifier {
                color: #61afef;
            }

            .token.generic {
                color: #e06c75 !important;
            }

            .token.property {
                color: #cd9968;
            }

            .token.selector {
                color: #e06c75;
            }

            .token.tag {
                color: #e06c75;
            }

            .token.attr-value {
                color: #7ec699;
            }

            .token.comment {
                color: #5c6370;
            }

            .token.keyword {
                color: #c678dd;
            }

            .token.function {
                color: #61afef;
            }

            .token.operator {
                color: #56b6c2;
            }

            .token.builtin {
                color: #e5c07b;
            }

            .token.string {
                color: #7ec699;
            }

            .token.regex {
                color: #e06c75;
            }

            .token.char-set {
                color: #e06c75;
            }

            .token.class-name {
                color: #e5c07b;
            }

            .token.group {
                color: #d19a66;
            }

            .token.escape {
                color: #56b6c2;
            }

            .token.regex-flags {
                color: #c678dd;
            }

            .token.variable {
                color: #e06c75;
            }

            .token.punctuation {
                color: #898989;
            }

            .token.constant {
                color: #e5c07b;
            }

            .token.quantifier {
                color: #d19a66;
            }

            .token.number {
                color: #d19a66;
            }

            .token.annotation {
                color: #e5c07b;
            }

            .token.attr-name {
                color: #d19a66;
            }
        }
    }
}

#article {
    padding: 10px 0;
    font-size: 12px;
    color: var(--app-theme-a-color);

    .app-image {
        margin: 4px 0;
    }

    .article {
        line-height: 26px;

        &.hide {
            padding: 10px;
        }

        blockquote {
            display: block;
            font-size: 13px;
            margin: 4px 0;
            padding: 4px 8px;
            position: relative;
            border-radius: 4px;
            background-color: #f8f9fa;
            color: var(--app-theme-a-color);
            border-left: 3px solid var(--app-theme);

            >code {
                font-size: 12px;
                color: #fff;
                margin: 0 2px;
                padding: 2px 4px;
                border-radius: 4px;
                background-color: var(--app-theme);
            }
        }

        ul,
        ol {
            padding-left: 24px;
        }

        ul {
            li {
                list-style-type: inherit;

                &.check-list-item {
                    list-style: none
                }

                .markdown-icon {
                    font-size: 16px;
                    margin: 0 4px 0 -20px;
                }

                .markdown-icon-check::before {
                    content: "\eb85"
                }

                .markdown-icon-square::before {
                    content: "\eb7f"
                }
            }
        }

        ol {
            li {
                list-style: inherit;
            }
        }

        .toc {
            margin-bottom: 12px;
        }

        .markdown-panel {
            padding: 0;
            margin: 8px 0;
            border-radius: 4px;
            background-color: rgb(235, 243, 255);

            .markdown-panel--title {
                color: #fff;
                font-size: 13px;
                font-family: 'remixicon';
                padding: 2px 10px 2px 10px;
                border-radius: 4px 4px 0 0;

                &::before {
                    margin-right: 6px;
                }
            }

            .markdown-panel--body {
                font-size: 12px;
                padding: 2px 10px;
                color: var(--app-theme-a-color);
            }
        }

        .markdown-panel-primary {

            .markdown-panel--title {
                background-color: rgb(76, 147, 255);

                &::before {
                    content: "\eca1";
                }
            }
        }

        .markdown-panel-info {

            .markdown-panel--title {
                background-color: rgb(86, 180, 199);

                &::before {
                    content: "\eca1";
                }
            }
        }

        .markdown-panel-warning {

            .markdown-panel--title {
                background-color: rgb(235, 178, 95);

                &::before {
                    content: "\ea21"
                }
            }
        }

        .markdown-panel-danger {

            .markdown-panel--title {
                background-color: rgb(243, 121, 121);

                &::before {
                    content: "\eb97"
                }
            }
        }

        .markdown-panel-success {

            .markdown-panel--title {
                background-color: rgb(81, 189, 139);

                &::before {
                    content: "\eb81"
                }
            }
        }

        table {
            border-collapse: collapse;
            color: var(--app-theme-a-color);

            th {
                font-size: 12px;
                min-width: 100px;
                text-align: left;
                padding: 0.2em 0.4em;
            }

            td {
                font-size: 12px;
                padding: 0.2em 0.4em;
            }
        }

        ruby {
            rt {
                font-size: 10px;
            }
        }

        hr {
            position: relative;
            display: block;
            height: 1px;
            width: 100%;
            margin: 20px 0;
            border-top: 1px solid #f1f1f1;
        }

        details:not(:last-child) {
            border-bottom: 1px solid #f1f1f1;
        }

        details:first-child {
            border-radius: 4px 4px 0 0;
        }

        details:last-child {
            border-radius: 0 0 4px 4px;
        }

        details[open]>summary {
            &::marker {
                content: "\ea4e"
            }
        }

        details>summary {
            &::marker {
                content: "\ea6e"
            }
        }

        details {
            overflow: hidden;
            background: #fafbfb;

            summary {
                cursor: pointer;
                user-select: none;
                font-size: 12px;
                padding: 5px 10px;
                font-family: 'remixicon';
                background-color: #f8f9fa;
                color: var(--app-theme-a-color);

                &::marker {
                    font-size: 16px;
                    transition: 0.3s;
                }
            }

            .markdown-detail-body {
                padding: 10px;
                color: var(--app-theme-a-color);

                p {
                    margin: 0
                }
            }
        }
    }

    p {
        font-size: 12px;
        word-break: break-all;

        >code {
            margin: 0 2px;
            font-size: 12px;
            text-decoration: underline wavy;
        }

        img {
            margin: 6px 0;
        }
    }

    img {
        max-width: 100%;
        object-fit: cover;
        border-radius: 4px;
    }

    a {
        color: var(--app-theme);
        padding: 2px;
        font-size: 12px;
        display: inline-block;
        text-decoration: underline;

        &:hover {
            color: var(--app-theme-a-color) !important;
        }
    }

    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: 12px;
        display: inline;
        font-weight: 500;
        padding: 2px 4px;
        color: #212121;
        transition: 0.3s;
        margin-bottom: 2px;
        text-decoration: none;
        border-bottom: 1px solid var(--app-theme-a-color);

        &:hover {
            color: var(--app-theme);
            border-bottom: 1px solid var(--app-theme);
        }

        &:before {
            content: "#";
        }

        a:after {
            content: "";
            display: none;
        }
    }

    fieldset {
        margin-top: 10px;
        border: 1px dashed var(--app-danger);

        legend {
            color: var(--app-danger);
        }
    }
}